'use client';

import { useState } from 'react';
import { useSession } from 'next-auth/react';

export function SaveDestinationButton({ destinationId }: { destinationId: string }) {
  const { data: session } = useSession();
  const [isSaved, setIsSaved] = useState(false);

  const handleSave = async () => {
    if (!session) {
      // 处理未登录状态
      return;
    }

    try {
      const response = await fetch('/api/destinations/save', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ destinationId }),
      });

      if (response.ok) {
        setIsSaved(true);
      }
    } catch (error) {
      console.error('Failed to save destination:', error);
    }
  };

  if (!session) {
    return null;
  }

  return (
    <button
      onClick={handleSave}
      disabled={isSaved}
      className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md ${
        isSaved
          ? 'bg-gray-100 text-gray-500'
          : 'text-blue-600 bg-blue-100 hover:bg-blue-200'
      }`}
    >
      {isSaved ? '已收藏' : '收藏目的地'}
    </button>
  );
} 